<template>
<!-- 这是兼职详情页 -->
    <div id="PartTimeDetails">
        <div class="Header-wrapper">
            <yd-navbar title="招聘详情" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
                <router-link to="/index" slot="left">
                    <i class="iconfont icon-back Fcolor"></i>
                </router-link>
            </yd-navbar>
        </div>
        <!-- 职位信息 -->
        <div class="conent-wrapper">
            <div class="post-wrapper-box" ref="Wrapper">
              <div class="post-content-box">
                <div class="post-wrapper">
                    <div class="post-content-top">
                        <span>{{positionlist.jobname}}</span>
                        <span class="post-content-color">{{positionlist.jobsalary}}元</span>
                    </div>
                    <!-- 职位详情 -->
                    <div class="details-wrapper">
                        <ul class="details-content">
                            <li>发布日期：{{positionlist.acttime}}</li>
                            <li>招聘人数：{{positionlist.num}}</li>
                            <li v-if="positionlist.sex==1">性别：男</li>
                            <li v-else-if="positionlist.sex==2">性别：女</li>
                            <li v-else>性别：不限</li>
                            <li>工作开始时间：{{this.startime}}</li>
                            <li>工作结束时间：{{this.endtime}}</li>
                    </ul>
                    </div>
                </div>
                <!-- 职位描述 -->
                <div class="post-describe-wrapper">
                    <div class="post-content-tag">
                        <span>职位描述：</span>
                    </div>
                    <div class="main-body-wrapper">
                        <ul>
                            <li>
                              <i class="icon-dian icon-point"></i>
                              {{positionlist.jobdescribe}}
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 下方个人信息板块 -->
                <div class="msg-wrapper">
                    <div>
                        <span>联系人：{{positionlist.actorname}}</span>
                    </div>
                    <div class="content-border">
                        <span>地址：{{positionlist.actareaname}}</span>
                    </div>
                </div>
              </div>
          </div>
            <!-- 底部功能按钮 -->
            <div class="wrapper">
                <div class="btn-wrapper">
                    <div class="btn-content btn-content-big">
                        <yd-button type="primary" @click.native="show1 = true" bgcolor="#F0F0F0">
                            <span>咨询</span>
                        </yd-button>
                        <div>
                        <yd-popup v-model="show1" position="center" class="pop-box">
                        <div class="pop-content" >
                            <div class="number">
                            <p>
                               {{positionlist.actorphone}}
                            </p>
                            </div>
                            <div class="pop-msg-btn">
                            <span class="pop-content-btn">
                                <div @click="show1 = false" class="cancel">取消</div>
                                <div class="rcolor" @click="tel(positionlist.actorphone)">拨打</div>
                            </span>
                            </div>
                        </div>
                        </yd-popup>
                        </div>
                    </div>
                    <div class="bgkcor btn-content-big" @click="go(positionlist.id)" v-if="this.mun!=='ok'">
                            <span>我要报名</span>
                    </div>
                    <div class="hkcor btn-content-big" v-else>
                            <span>已报名</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      show1: false,
      positionlist: [],
      startime: '',
      endtime: '',
      mun: ''
    }
  },
  components: {
    apis
  },
  methods: {
    tel (tel) {
      window.location.href = 'tel://' + tel
    },
    go (id) {
      this.$router.push({
        path: '/SignUp',
        query: {
          id: id,
          type: 1
        }
      })
    }
  },
  created () {
    this.dataId = this.$route.query.id
    // console.log(this.dataId)
    this.$axios
      .post(
        apis + '/app/jobresume/checksign',
        this.confusion(
          JSON.stringify({
            jobid: this.dataId + ''
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
      .then(response => {
        this.mun = response.data
        // console.log(this.mun)
      })
      .catch(error => {
        console.log(error)
      })
    this.$axios
      .post(
        apis + '/app/jobinfoapp/detail',
        this.confusion(
          JSON.stringify({
            recid: this.dataId + ''
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
      .then(response => {
        this.positionlist = response.data
        // console.log(this.positionlist)
        this.startime = this.positionlist.starttime.split(' ')[0]
        this.endtime = this.positionlist.endtime.split(' ')[0]
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>
<style scoped>
.release-right {
  font-size: 12px;
  color: #fff;
}
.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
#PartTimeDetails {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
}
.post-wrapper-box {
  width: 100%;
  overflow: auto;
  position: fixed;
  top: 45px;
  bottom: 50px;
}
.post-wrapper {
  width: 100%;
  border-bottom: 4px solid #dfdfdf;
  overflow: hidden;
  padding: 15px 12px;
}
.post-content-top {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  margin-bottom: 10px;
}
.post-content-color {
  color: #ff5b5b;
}
.details-content {
  display: block;
  line-height: 22px;
}
.details-content li {
  font-size: 11px;
  color: #999999;
  float: left;
  width: 100%;
}
.post-describe-wrapper {
  width: 100%;
  padding: 10px 11px;
  border-bottom: 1px solid #dfdfdf;
}
.post-content-tag {
  font-size: 11px;
  color: #999;
  line-height: 33px;
  height: 33px;
}
.main-body-wrapper {
  width: 100%;
}
.icon-point {
  font-size: 12px;
}
.main-body-wrapper li {
  color: #666;
  font-family: ".SFNSDisplay";
  font-size: 12px;
  line-height: 15px;
}
.msg-wrapper {
  height: 121px;
}
.msg-wrapper div {
  height: 59px;
  padding: 0 15px;
  line-height: 59px;
}
.msg-wrapper .content-border {
  height: 64px;
  border: 1px solid #dfdfdf;
  border-left: none;
  border-right: none;
  position: relative;
}
.wrapper {
  width: 100%;
  position: fixed;
  bottom: 0;
}
.btn-wrapper {
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: #f0f0f0;
  height: 51px;
  display: flex;
}
.btn-wrapper .btn-content-big {
  width: 151px;
  height: 41px;
}
.btn-wrapper div span {
  line-height: 41px;
  font-size: 15px;
  color: #333333;
}
.btn-content {
  border: 1px solid #ffd602;
  border-radius: 7px;
}
.pop-box {
  width: 90%;
  z-index: 8;
  background: #fff;
}
.pop-content {
  width: 241px;
  height: 81px;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
}
.number {
  height: 55px;
  width: 100%;
}
.number p {
  font-size: 14px;
  line-height: 55px;
  color: #333;
}
.pop-msg-btn {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #999;
}
.pop-msg-btn div {
  float: left;
  width: 45%;
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin: 0 5px;
}
.cancel {
  color: #666;
  border-right: 1px solid #999;
}
.pop-content-btn {
  background-color: #fff;
}
.bgkcor {
  background-color: #ffd602;
  border: 1px solid #ffd602;
  border-radius: 7px;
}
.hkcor{
  background-color: #999;
  border: 1px solid #999;
  border-radius: 7px;
}
.hkcor span{
  color: #fff!important;
}
.btn-wrapper .bgkcor span {
  color: #fff;
}
.color-nav {
  background-color: green;
}
</style>
